import React, {PureComponent} from "react";
import {AddImgUrl} from "../../../common/API";

class ThreeFeature extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            index: -1,
        };
        this.getMouseOverIndex = this.getMouseOverIndex.bind(this);
    }

    render() {


        return (
            <div style={featureWrapperStyle}>

                <ul style={featureUlStyle}>
                    <li
                        onMouseEnter={() => {
                            this.getMouseOverIndex(0, true);
                        }}
                        onMouseLeave={() => {
                            this.getMouseOverIndex(0, false);
                        }}
                        style={this.state.index === 0 ? featureLiOverStyle : featureLiStyle}
                    >
                        <span style={featureSpanStyle}/>&nbsp;&nbsp;分享项目
                    </li>

                    <li
                        style={this.state.index === 1? featureLiOverStyle :featureLiStyle}
                        onMouseEnter={() => {
                            this.getMouseOverIndex(1, true);
                        }}
                        onMouseLeave={() => {
                            this.getMouseOverIndex(1, false);
                        }}
                    >
                        <span style={featureSpanStyle}/>&nbsp;&nbsp;待办事项
                    </li>

                    {
                        this.props.showOpenApi?  <li
                            style={ this.state.index === 2 ? featureLiOverStyle :featureLiStyle}
                            onMouseEnter={() => {
                                this.getMouseOverIndex(2, true);
                            }}
                            onMouseLeave={() => {
                                this.getMouseOverIndex(2, false);
                            }}
                        >
                            本站开放Api
                        </li> : null
                    }
                </ul>
            </div>
        );

    }

    getMouseOverIndex(index, bool) {
        let showIndex = -1;
        if (bool) {
            showIndex = index;
        }
        this.setState(() => ({
            index: showIndex,
        }));
    }


}

export default ThreeFeature;

const featureWrapperStyle = {
    backgroundColor: 'white',
    borderRadius: 4,
    overflow: "hidden",
    boxShadow: "2px 2px 2px #ccc",
};
// 上下 20  左右50
const featureUlStyle = {
    display: "block",
    width: 200,
    margin: "20px 50px",
};

const featureLiStyle = {
    display: "block",
    width: "100%",
    height: 40,
    lineHeight: "40px",
    textAlign: "center",
    color: "white",
    marginBottom: 20,
    backgroundColor: "#1c8ad4",
    borderRadius: 4,
    cursor: "pointer",
};

//207ab6
const featureLiOverStyle = {
    display: "block",
    width: "100%",
    height: 40,
    lineHeight: "40px",
    textAlign: "center",
    color: "white",
    marginBottom: 20,
    backgroundColor: "#207ab6",
    borderRadius: 4,
    cursor: "pointer",
};

const featureSpanStyle = {
    display: "inline-block",
    width: 20,
    height: 20,
    background: `url(${AddImgUrl}) center center no-repeat`,
    backgroundSize: "20px 20px",
    transform: "translateY(3px)",
};